{% extends 'basic/layout/page_basic.html' %}
{% load static %}


<!-- Title -->
{% block title %} 学生照片 {% endblock %}


<!-- CSS -->
{% block css %}
    <style>
        .contentArea .left:hover {
            font-weight: bold;
            color: red;
        }

        .contentArea i:hover {
            color: red;
            font-weight: bold;
        }


    </style>
{% endblock %}


<!-- Content -->
{% block content %}
    <!-- 内容01：面包屑导航-->
    <span class="layui-breadcrumb">
      <a href="/">首页</a>
      <a href="#">学生管理</a>
      <a><b>学生照片</b></a>
    </span>

    <!-- 内容02：查询部分 -->
    <div class="queryArea" style="margin: 15px 0 30px 0;">
        <form class="layui-form">
            {% csrf_token %}
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" for="inputStr"><b>编号：</b></label>
                    <div class="layui-input-inline">
                        <input type="text" name="inputStr" id="inputStr" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" for="startdate"><b>开始日期：</b></label>
                    <div class="layui-input-inline">
                        <input type="text" name="startdate" id="startdate" class="layui-input" placeholder="请选择开始日期">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" for="enddate"><b>结束日期：</b></label>
                    <div class="layui-input-inline">
                        <input type="text" name="enddate" id="enddate" class="layui-input" placeholder="请选择结束日期">
                    </div>
                </div>
                <div class="layui-inline">
                    <button type="button" id="btnQuery" class="layui-btn">
                        <i class="fa fa-search" aria-hidden="true"></i>&nbsp;查询
                    </button>
                    <button type="button" id="btnAll" class="layui-btn">
                        <i class="fa fa-bars" aria-hidden="true"></i>&nbsp; 全部
                    </button>
                    <button type="button" id="btnUpload" class="layui-btn">
                        <i class="fa fa-upload" aria-hidden="true"></i>&nbsp;上传
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- 内容03： 图片展示区域-->
    <div class="contentArea" style="margin:auto;"></div>

{% endblock %}


<!-- JS -->
{% block js %}
    <script>
        // 入口函数
        $(function () {
            // 页面初始化
            initPage();
            // 响应所有按钮的点击
            buttonClick();
            // 上传文件
            uploadImage();

            // 获取数据库的照片
            loadImages();
        });

        // =============页面初始化的功能实现 ===========
        function initPage() {
            layui.use(['form', 'laydate'], function () {
                let form = layui.form;
                let laydate1 = layui.laydate;
                let laydate2 = layui.laydate;

                // 显示日期的选择框
                laydate1.render({
                    elem: '#startdate',
                });
                laydate2.render({
                    elem: '#enddate',
                })
            })
        }

        // ============ 响应按钮点击事件 ===============
        function buttonClick() {
            //== 查询==
            $('#btnQuery').on('click',function () {
               loadImages();
            });
            // == 显示全部==
            $('#btnAll').on('click',function () {
               location.reload();
            });
        }

        // ============= 文件上传的功能实现 ============
        function uploadImage() {
            layui.use(['upload'], function () {
                let upload = layui.upload;

                upload.render({
                    elem: '#btnUpload'
                    , url: '{% url 'upload_student_image' %}' // 上传图片的后台接口【Python实现】
                    , method: 'post'
                    , data: {
                        csrfmiddlewaretoken: "{{ csrf_token }}",
                    }
                    , accept: 'file' //普通文件
                    , exts: 'doc|docx' //只允许上传压缩文件
                    , size: 10240, //限制文件大小，单位 KB
                    //,multiple: true // 是否支持多文件一次上传

                    // ============= 回调函数 ==============
                    before: function (res, index, upload) {
                        // 上传之前执行的函数
                        layer.load();  //上传loading

                    },
                    done: function (res, index, upload) {
                        // 上传成功后执行的函数
                        // 关闭等待的动画
                        layer.closeAll('loading');
                        // 判断是否成功
                        if (res.code === 0) {
                            layer.msg("图片上传成功！");
                            location.reload();
                        } else {
                            layer.msg(res.error, {
                                icon: 2,
                                area: ['500px', '250px'],
                                time: -1,
                                btn: ['关闭']
                            })
                        }

                    },
                    error: function (res, index, upload) {
                        // 上传错误后执行的函数
                        // 关闭等待的动画
                        layer.closeAll('loading');
                    }
                })
            })
        }


        // ============= 获取存储在数据库的照片 =============
        function loadImages() {
            // Ajax请求所有照片
            $.ajax({
                url: "{% url 'list_student_image' %}",
                method: 'post',
                data:{
                    inputStr: $('#inputStr').val().trim(),
                    q_date_start: $('#startdate').val(),
                    q_date_end: $('#enddate').val(),
                    csrfmiddlewaretoken: "{{ csrf_token }}",
                },
                dataType: 'json',
                success: function (res) {
                    // 把获取的数据呈现在页面
                    buildImagePage(res.data);
                }
            })
        }


        // ============== 图片在前端页面的展示 ==============
        function buildImagePage(data) {
            // == 获取父容器 ==
            let parentContainer = $('.contentArea');
            // == 清空所有的所货单 ==
            parentContainer.html("");
            // 循环遍历
            $.each(data, (index, value) => {
                // 新建顶层div
                let topContainer = $('<div>').attr({
                    'class': 'layui-col-xs6 layui-col-sm6 layui-col-md4 layui-col-lg2',
                    'style': 'margin-bottom: 40px;'
                }).appendTo(parentContainer);

                // 新建居中的容器
                let centerTopContainer = $('<div>').attr({
                    'style': "width: 80%; height: 220px;margin: auto;font-size:18px; text-align:center;color:white"
                }).appendTo(topContainer);

                //新建img 标签并加载顶层div
                let imgContent = $('<img>').attr({
                    'src': value.url,
                    'alt': '图片名称：' + (value.id).toString(),
                    'style': "width: 100%;height: 200px;border: 1px #009688 solid;box-sizing:border-box; ",
                    'onclick': 'previewImg(this)'
                }).appendTo(centerTopContainer);

                let bottomArea = $('<div>').attr({'style': 'width:100%;height:20px;background-color:#009688'}).appendTo(centerTopContainer);
                $('<div>').attr({
                    'style': "width:90%; height:100%;float:left;font-size:14px;text-align:left;",
                    'class': 'left'
                }).html("&nbsp&nbsp" + value.id).appendTo(bottomArea);
                $('<div>').attr({
                    'style': "width:10%; height:100%; float:left;",
                    'class': 'right',
                }).html("<i id='btnDel' name='" + value.id + "' type='" + value.url + "' class='fa fa-trash' aria-hidden='true' style='font-size:14px;text-align:right'" +
                    " onclick='deleteValue(this)'></i>").appendTo(bottomArea);


            });
        }


        // ======= 在弹出层显示图片 ========
        function previewImg(obj) {
            var img = new Image();
            img.src = obj.src;

            var height = img.naturalHeight + 50; // 原图片大小
            var width = img.naturalWidth; //原图片大小
            var imgHtml = "<img src=" + obj.src + " style='width:" + width + "height:" + height + "'/>";
            //弹出层
            layer.open({
                type: 1,
                shade: 0.8,
                offset: 'auto',
                area: 'auto',
                //area: [width.toString() + 'px', height.toString() + 'px'],// [500 + 'px',550+'px'],  //  //原图显示
                maxWidth: '1000px',
                maxHeight: '800px',
                shadeClose: true,
                scrollbar: true,
                title: "<b style='color:navy'>【图片预览】</b>", //不显示标题
                content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                cancel: function () {
                    //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
                }
            });
        }


    </script>
{% endblock %}